<template>
  <el-dialog title="流程数据信息" v-model="dialogVisible" width="70%">
    <el-alert
      title="使用说明"
      type="warning"
      description="以下流程信息可以被存储起来，方便下一次流程加载"
      show-icon
      close-text="知道了"
    >
    </el-alert>
    <br />
    <!--一个高亮显示的插件-->
    <!-- <codemirror
      v-model="flowJsonData"
      :options="options"
      class="code"
      ref="codeEditor"
    ></codemirror> -->
    <el-input
      v-model="flowJsonData"
      :rows="40"
      type="textarea"
      placeholder="Please input"
    />
    <template #footer>
      <el-button type="primary" @click="updateInfo" size="small"
        >更 新</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  // components: { codemirror },
  props: {
    data: Object,
  },
  data() {
    return {
      dialogVisible: false,
      flowJsonData: {},
      options: {
        mode: { name: "javascript", json: true },
        lineNumbers: true,
      },
    };
  },
  methods: {
    init() {
      this.dialogVisible = true;
      this.flowJsonData = JSON.stringify(this.data, null, 4).toString();
    },
    updateInfo() {
      this.$emit("update", JSON.parse(this.flowJsonData));
    },
  },
};
</script>
